<template>
    <div class="waitstady">
        <div class="toptab" v-if="!allchecks">
            <router-link to="/mycontent">
                <span class="iconfont icon-arrow-left-bold" @click="backout()"></span>
            </router-link>


            <h4>待学习</h4>
            <div class="top-right">
                <router-link to="/search">
                    <span class="iconfont icon-search" style="padding: 5px;"></span>
                </router-link>
                <span class="iconfont icon-gengduo" @click="showPopup"></span>
            </div>

            <van-popup v-model="show" :round="true" position="bottom" :style="{ height: '15%' }">
                <span style="font-size: 14px;font-weight: 600; position: absolute;top: 33px;"
                    @click="allchecks = !allchecks, show = false">编辑</span>
            </van-popup>
        </div>
        <!--  -->
        <div class="toptab" v-if="allchecks">
            <span style="font-size: 15px;" @click="cheackall()" v-if="!unallshow">选择全部</span>
            <!--  -->
            <span style="font-size: 15px;" v-if="unallshow" @click="uncheackall()">取消选择</span>
            <!-- icon-shezhi -->

            <!-- <h4>生词本</h4> -->
            <span style="font-size: 15px;padding-right: 25px;font-weight: 600;"
                @click="allchecks = !allchecks">取消编辑</span>
        </div>



        <div class="worldlist">
            <div class="itembox" v-for="item in datalists()" :key="item.id">
                <van-swipe-cell class="mainitem" v-if="!item.detailinf">
                    <input type="checkbox" v-if="allchecks" v-model="item.checked">
                    <!-- 单选框 -->
                    <van-cell :border="false" :title="item.name" class="worlds" @click="cheack(item.id)" />
                    <template #right v-if="!allchecks">
                        <!-- <van-button square type="danger" text="重学" color="#e4303a" class="del"   @click="outstadydone(item.id)"/> -->
                        <van-button square type="primary" text="标熟" color="#008b7a" class="impro"
                            @click="outripe(item.id)" />
                    </template>
                </van-swipe-cell>
                <!-- detaiitem outdetai -->
                <van-swipe-cell :class="['detaiitem', item.detaicheak ? '' : 'outdetai']" v-if="item.detailinf">
                    <!-- <van-cell :border="false" title="derive" class="worlds" /> -->
                    <div class="worlds">

                        <div class="itemtext" @click="cheackdetai(item.id)">
                            <input type="checkbox" v-if="allchecks" v-model="item.checked">
                            <div>
                                <h4>{{ item.name }}</h4>
                                <span>{{ item.phonetic }}</span>
                            </div>
                            <p v-for="means in item.meaning" :key="means">{{ means }}</p>
                            <!-- <p>vt. &ensp;从...中获得</p> -->
                        </div>
                        <div class="itemright" @click="getworldinfo(item.id)">
                            <svg t="1666617723339" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="7428" width="14" height="14"
                                v-if="!item.vocabularylist" @click="addVocabularylist(item.id)">
                                <path
                                    d="M240.1536 934.540288c11.133952 7.635968 24.193024 11.515904 37.266432 11.515904 10.778624 0 21.543936-2.609152 31.296512-7.840768l203.25888-109.463552 203.298816 109.463552c9.781248 5.231616 20.559872 7.840768 31.296512 7.840768 13.060096 0 26.120192-3.879936 37.29408-11.515904 20.190208-13.947904 30.518272-37.854208 26.474496-61.70624l-39.616512-236.632064 170.909696-170.662912c16.925696-16.831488 22.718464-41.529344 15.012864-63.960064-7.732224-22.38976-27.6224-38.742016-51.56864-42.320896l-233.148416-34.684928L570.566656 114.184192c-10.628096-22.10304-33.46944-36.242432-58.591232-36.242432-25.039872 0-47.894528 14.139392-58.563584 36.242432l-101.336064 210.388992-233.160704 34.684928c-23.960576 3.57888-43.850752 19.931136-51.569664 42.320896-7.704576 22.43072-1.870848 47.128576 15.040512 63.960064l170.841088 170.662912-39.6288 236.632064C209.60768 896.68608 219.921408 920.592384 240.1536 934.540288zM118.477824 421.960704l232.410112-34.521088 40.887296-6.0928 17.949696-37.21216 102.264832-212.041728 102.250496 212.041728 17.964032 37.21216 40.887296 6.0928 232.410112 34.521088L736.012288 591.026176l-28.469248 28.40064 6.626304 39.629824 39.602176 236.193792L548.95616 785.091584l-37.008384-19.9168-37.006336 19.9168L270.12608 895.292416l39.602176-236.234752 6.626304-39.629824-28.470272-28.40064L118.477824 421.960704z"
                                    p-id="7429" fill="#757575"></path>
                            </svg>
                            <svg t="1666617555895" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="7236" width="14" height="14"
                                v-if="item.vocabularylist" @click="addVocabularylist(item.id)">
                                <path
                                    d="M845.5 934.7c2.5 18.1-4.7 34.8-19.6 45.6-14.9 10.7-33 12.4-49.6 4.4L534 868.1c-13.8-6.6-28.3-6.6-42.1 0L249.4 984.3c-16.6 7.9-34.7 6.3-49.6-4.5-14.9-10.8-22-27.5-19.5-45.6l36.2-265.7c2.1-15.1-2.4-28.9-13-39.9l-186-193.9C4.9 421.5 0.8 403.8 6.5 386.4c5.7-17.4 19.4-29.3 37.5-32.6l264.8-47.7c15.1-2.7 26.8-11.2 34.1-24.6l127.6-236c8.7-16.1 24.4-25.4 42.7-25.4 18.4 0 34 9.3 42.7 25.5l127.4 236.2c7.3 13.4 19 21.9 34 24.7l264.8 48c18.1 3.3 31.8 15.2 37.5 32.6 5.7 17.4 1.6 35.1-11.1 48.3l-186 193.7c-10.6 11-15.1 24.8-13 39.9l36 265.7z"
                                    fill="#F19927" p-id="7237"></path>
                                <path
                                    d="M809.4 669c-2-15.1 2.4-28.8 13-39.9l186.1-193.7c12.7-13.2 16.8-30.9 11.1-48.3-5.7-17.4-19.4-29.3-37.5-32.6l-264.8-48c-15.1-2.7-26.8-11.2-34-24.7L555.9 45.5c-8.7-16.1-24.3-25.4-42.7-25.5-18.4 0-34 9.3-42.7 25.4l-127.6 236c-7.3 13.4-19 21.9-34.1 24.6L44 353.8c-18.1 3.3-31.8 15.2-37.5 32.6-5.7 17.4-1.6 35.1 11.1 48.3l186 193.9c10.6 11 15.1 24.8 13 39.9l-21.8 159.6h636.3L809.4 669z"
                                    fill="#FAD97E" opacity=".2" p-id="7238"></path>
                                <path
                                    d="M809.4 669c-2-15.1 2.4-28.8 13-39.9l186.1-193.7c12.7-13.2 16.8-30.9 11.1-48.3-5.7-17.4-19.4-29.3-37.5-32.6l-264.8-48c-15.1-2.7-26.8-11.2-34-24.7L555.9 45.5c-8.7-16.1-24.3-25.4-42.7-25.5-18.4 0-34 9.3-42.7 25.4l-127.6 236c-7.3 13.4-19 21.9-34.1 24.6L44 353.8c-18.1 3.3-31.8 15.2-37.5 32.6-5.7 17.4-1.6 35.1 11.1 48.3l186 193.9c10.6 11 15.1 24.8 13 39.9l-2.9 21.1h598.6l-2.9-20.6z"
                                    fill="#FAD97E" opacity=".2" p-id="7239"></path>
                                <path
                                    d="M1008.5 435.4c12.7-13.2 16.8-30.9 11.1-48.3-5.7-17.4-19.4-29.3-37.5-32.6l-264.8-48c-15.1-2.7-26.8-11.2-34-24.7L555.9 45.5c-8.7-16.1-24.3-25.4-42.7-25.5-18.4 0-34 9.3-42.7 25.4l-127.6 236c-7.3 13.4-19 21.9-34.1 24.6L44 353.8c-18.1 3.3-31.8 15.2-37.5 32.6-5.7 17.4-1.6 35.1 11.1 48.3l67.3 70.2h856.9l66.7-69.5z"
                                    fill="#FAD97E" opacity=".2" p-id="7240"></path>
                                <path
                                    d="M982.2 354.5l-264.8-48c-15.1-2.7-26.8-11.2-34-24.7L555.9 45.5c-8.7-16.1-24.3-25.4-42.7-25.5-18.4 0-34 9.3-42.7 25.4l-127.6 236c-7.3 13.4-19 21.9-34.1 24.6L44 353.8c-9.8 1.8-18.1 6.2-24.8 12.6h987.1c-6.5-6-14.7-10.2-24.1-11.9z"
                                    fill="#FAD97E" opacity=".2" p-id="7241"></path>
                                <path
                                    d="M555.9 45.5c-8.7-16.1-24.3-25.4-42.7-25.5-18.4 0-34 9.3-42.7 25.4L372 227.7h282.3L555.9 45.5z"
                                    fill="#FAD97E" opacity=".2" p-id="7242"></path>
                            </svg>
                            <span class="iconfont icon-sousuo" @click="detailshowPopup"></span>
                        </div>
                    </div>
                    <template #right v-if="!allchecks">
                        <!-- <van-button square type="danger" text="重学" color="#e4303a" class="del"  @click="outstadydone(item.id)"/> -->
                        <van-button square type="primary" text="标熟" color="#008b7a" class="impro"
                            @click="outripe(item.id)" />
                    </template>
                </van-swipe-cell>
            </div>
        </div>

        <van-popup v-model="detailshow" position="bottom" :style="{ height: '90%' }" round>

            <div class="worldcard">
                <div class="cardtopicon">
                    <div></div>
                </div>
                <h2>{{ worlddeta.name }}</h2>
                <h3>{{ worlddeta.phonetic }}
                    <van-icon name="bullhorn-o" @click="playmuise()" v-if="!playshow" />
                    <van-icon name="bullhorn-o" color="red" v-if="playshow" />
                </h3>
                <div class="means">
                    <h2 v-for="means, index in worlddeta.meaning" :key="index">
                        {{ means }}
                    </h2>
                    <!-- <h2>
            v. 包；裹;覆盖；隐藏
        </h2>
        <h2>
            v. 包；裹;覆盖；隐藏
        </h2> -->
                </div>
                <div class="cardmode">
                    <van-tabs v-model="active">
                        <van-tab title="例句">
                            <van-cell-group>
                                <van-cell center :title="meansent" :label="worlddeta.sentencemean[index]"
                                    icon="volume-o" v-for="meansent, index in worlddeta.sentence" :key="index" />
                            </van-cell-group>
                        </van-tab>
                        <van-tab title="克斯林">内容 2</van-tab>
                        <van-tab title="词根">内容 3</van-tab>
                        <van-tab title="真题">内容 4</van-tab>
                    </van-tabs>
                </div>

            </div>

        </van-popup>

        <div class="dels" v-if="allchecks">
            <span v-if="delshow">标熟</span>
            <span @click="checkedripe()" style="color:#ff6c08 ;" v-if="!delshow">标熟</span>
        </div>

        <audio :src="worlddeta.music" ref="audio" controls style="display: none;" @ended="onendedFun"></audio>
    </div>
</template>

<script>
export default {
    props: ['cet4list', 'worlddeta'],
    data() {
        return {
            activeName: 'a',
            detailinf: false,
            collection: false,
            show: false,
            allchecks: false,
            detailshow: false,
            active: 0,
            playicon: false
        };
    },
    methods: {
        
        cheack(id) {
            this.$emit("cheack", id);
        },
        cheackdetai(id) {
            this.$emit("cheackdetai", id);
        },
        detailshowPopup() {//详细提示层
            this.detailshow = true;
        },
        getworldinfo(id) {//详情页获取
            this.$emit("getworldinfo", id);
        },
        showPopup() {//提示层
            this.show = true;
        }, addVocabularylist(id) {//取反生词
            this.$emit("addVocabularylist", id);
        },
        datalists() {//显示未学习
            return this.cet4list.filter(item => {
                return !item.stadydone && !item.ripe;
            })
        },
        checkedripe() {//多选标熟
            this.$emit("checkedripe");
        },
        outripe(id) {//标熟
            this.$emit("outripe", id)
        },
        cheackall() {//全选
            this.cet4list.forEach((item) => {
                if (!item.stadydone && !item.ripe == true)
                    item.checked = true
            })
        },
        uncheackall() {//反选
            this.cet4list.forEach((item) => {
                if (!item.stadydone && !item.ripe == true)
                    item.checked = false
            })
        },
        backout() {//返回初始化
            this.cet4list.forEach((item) => {
                item.detaicheak = false;
                item.detailinf = false;
            })
            // console.log("常识");
        }
        ,
        playmuise() {//播放音频
            this.playicon = true
            this.$refs.audio.play();
            return this.playicon
        },
        onendedFun() {
            this.playicon = false
            console.log("结束");
        },
    },
    computed: {
        unallshow() {
            return this.cet4list.every(item => {
                if (!item.stadydone && !item.ripe == true) {
                    return item.checked
                } else {
                    return true
                }

            })
        },
        delshow() {
            return this.cet4list.every(item => {
                if (!item.stadydone && !item.ripe == true) {
                    return !item.checked
                } else {
                    return true
                }

            })
        },
        playshow() {
            var icon = this.playicon
            return icon
        }
    },
    created() {
        console.log(this.cet4list);
    }
};
</script>

<style lang="scss" scoped>
.van-tabs ::v-deep .van-button--normal {
    height: 100%;
}

.van-button--normal {
    padding: 0 15px;
    font-size: 14px;
    height: 100%;
}

.waitstady {
    background: #f4f4f4;

    min-height: 667px;

    // padding: 0 14.5px;
    .toptab {
        display: flex;
        z-index: 99;
        justify-content: space-between;
        // align-items: center;
        padding-top: 35px;
        padding-bottom: 10px;
        // text-align: center;

        // position: fixed;
        width: 100%;
        background-color: #fff;
        ;

        h4 {
            font-weight: 600;
            padding-left: 35px;
            font-size: 14px;
        }



        span {
            font-size: 20px;
            padding: 0 18px;
        }
    }

    .worldlist {
        .mainitem {
            border-bottom: 1px solid #f5f5f5;

            input {
                position: absolute;
                top: 31%;
                left: 12px;
                z-index: 100;
                width: 18px;
                height: 18px;
                // border-radius: 30px;
            }

            .worlds {
                // color: #ff6c08;
                font-weight: 600;
                padding-right: 45px;
                padding-left: 40px;

                .del {
                    background-color: #e4303a;
                    border: none;
                    letter-spacing: 1px;
                    font-size: 12px;
                }

                .impro {
                    background-color: #008b7a;
                    border: none;
                    letter-spacing: 1px;
                    font-size: 12px;
                }
            }
        }

        .detaiitem {
            border-bottom: 1px solid #f5f5f5;
            background-color: #f5e3d6;

            input {
                position: absolute;
                top: 45%;
                left: 12px;
                z-index: 100;
                width: 18px;
                height: 18px;
                border-radius: 10px;
            }

            .worlds {
                // color: #ff6c08;
                // font-weight: 600;
                display: flex;
                justify-content: space-between;
                align-items: flex-end;
                padding-right: 14.5px;
                padding-left: 40px;
                padding-bottom: 15px;

                .itemtext {
                    display: flex;
                    flex-direction: column;

                    div {
                        display: flex;
                        padding-top: 15px;
                        padding-bottom: 10px;

                        h4 {
                            color: #ff6c08;
                            font-size: 13px;
                            font-weight: 600;
                            padding-right: 8px;
                        }

                        span {
                            font-size: 10px;
                            color: #827871;
                        }
                    }

                    p {
                        font-size: 13px;
                        padding: 2px 0;
                        font-weight: 600;
                        letter-spacing: 0.5px;
                    }
                }

                .itemright {
                    display: flex;

                    svg {
                        padding-top: 2.5px;
                    }

                    span {
                        font-size: 20px;
                        padding-left: 15px;
                    }
                }

                .del {
                    background-color: #e4303a;
                    border: none;
                    letter-spacing: 1px;
                    font-size: 12px;
                    // height: 100%;
                }

                .impro {
                    background-color: #008b7a;
                    border: none;
                    letter-spacing: 1px;
                    font-size: 12px;
                    // height: 100%;
                }
            }
        }

        .outdetai {
            background-color: #fff;

            .worlds {
                .itemtext {
                    div {
                        h4 {
                            color: #303030;
                        }
                    }
                }
            }


        }
    }

    .dels {
        background-color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        bottom: 0;
        height: 50px;
        width: 100%;
        padding-bottom: 10px;
        color: #e6e6e6;

    }

    .worldcard {
        padding: 0 15px;

        .cardtopicon {
            display: flex;
            justify-content: center;
            padding: 8px;

            div {
                background-color: #e0e0e0;
                width: 60px;
                border-radius: 10px;
                height: 5px;
            }
        }

        h2 {
            color: #ff6800;
            font-size: 36px;
            padding-top: 25px;
        }

        h3 {
            padding-top: 5px;
            color: #818181;
        }

        .means {
            padding-top: 20px;

            h2 {
                padding-top: 5px;
                color: #838383;
                font-size: 16px;
            }
        }

        .cardmode {
            margin-top: 30px;


        }
    }
}
</style>